<template>
	<view class="page-height">
		<i-top-bar title="编辑地址" :back-press="true" @on-back="onBack()"></i-top-bar>
		<view class="page-content">
			<view class="form-view">
				<view class="line">
					<text class="label">姓名</text>
					<view class="right">
						<view class="line-bg">
							<input type="text" v-model="name" placeholder="请输入姓名" class="input" />
						</view>
						<text class="tips">请填写真实姓名,以免信息重复。</text>
					</view>
				</view>
				<view class="line">
					<text class="label">手机号</text>
					<view class="right">
						<view class="line-bg">
							<input type="tel" v-model="mobile" placeholder="请输入手机号" class="input" />
						</view>
					</view>
				</view>
				<view class="line">
					<text class="label">省市区</text>
					<view class="right right-row">
						<view class="line-bg">
							<picker @change="onProvinceChange" :range="province_list" range-key="label" :disabled="province_list.length == 0">
								<view class="select-line">
									<input type="text" :value="province_name" placeholder="选择省" class="input" disabled />
									<image src="@/static/images/select.png" class="select-ioc"></image>
								</view>
							</picker>
						</view>
						<view class="line-bg">
							<picker @change="onCityChange" :range="city_list" range-key="label" :disabled="city_list.length == 0">
								<view class="select-line">
									<input type="text" :value="city_name" placeholder="选择市" class="input" disabled />
									<image src="@/static/images/select.png" class="select-ioc"></image>
								</view>
							</picker>

						</view>
						<view class="line-bg">
							<picker @change="onAreaChange" :range="area_list" range-key="label" :disabled="area_list.length == 0">
								<view class="select-line">
									<input type="text" :value="area_name" placeholder="选择区" class="input" disabled />
									<image src="@/static/images/select.png" class="select-ioc"></image>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="line">
					<text class="label">详细地址</text>
					<view class="right">
						<view class="line-bg">
							<textarea placeholder="请输入" v-model="address" class="textarea"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-view">
				<button class="btn" @click="onSaveAddress()">保 存</button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<i-toast ref="iToast"></i-toast>
		<confirm ref="quit" content="退出将不会保存您的修改\n是否退出？" @confirm="goBack()"></confirm>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				back_type: 0,
				name: "",
				mobile: "",
				address: "",

				province_list: [],
				province_name: "",
				province_id: "",

				city_list: [],
				city_name: "",
				city_id: "",

				area_list: [],
				area_name: "",
				area_id: "",

			};
		},

		onLoad(option) {

			if (option.id) {
				this.id = option.id
				this.getAddressInfo()
			}

		},
		methods: {
			//返回
			onBack() {
				this.$refs.quit.show()
			},
			getProvinceList() {
				return new Promise((resolve) => {
					this.api.post("/api/common/area").then(res => {
						this.province_list = res
						resolve()
					}).catch(err => {
						resolve()
						this.apiErr(err)
					}).finally(() => {
						this.loadingHide();
					})
				})

			},
			getCityList() {
				return new Promise((resolve) => {
					const params = {
						province: this.province_id
					}
					this.api.post("/api/common/area", { params: params }).then(res => {
						this.city_list = res
						resolve()
					}).catch(err => {
						resolve()
						this.apiErr(err)
					}).finally(() => {
						this.loadingHide();
					})
				})

			},
			getAreaList() {
				return new Promise((resolve) => {
					const params = {
						city: this.city_id
					}
					this.api.post("/api/common/area", { params: params }).then(res => {
						this.area_list = res
						resolve()
					}).catch(err => {
						resolve()
						this.apiErr(err)
					}).finally(() => {
						this.loadingHide();
					})
				})
			},
			//选择了省
			onProvinceChange(e) {
				const active = this.province_list[e.detail.value]
				this.province_name = active.label
				this.province_id = active.value
				this.city_list = [];
				this.area_list = [];
				this.city_name = ""
				this.city_id = ""
				this.area_name = ""
				this.area_id = ""
				this.getCityList()

			},
			//选择市
			onCityChange(e) {
				const active = this.city_list[e.detail.value]
				this.city_name = active.label
				this.city_id = active.value
				this.area_list = [];
				this.area_name = ""
				this.area_id = ""
				this.getAreaList()
			},
			//选择县
			onAreaChange(e) {
				const active = this.area_list[e.detail.value]
				this.area_name = active.label
				this.area_id = active.value
			},

			getAddressInfo() {
				const params = {
					id: this.id
				}
				this.api.post("/api/address/detail", { params: params }).then(async (res) => {
					this.name = res.receiver
					this.mobile = res.mobile
					this.address = res.address

					this.province_id = res.province_id
					this.province_name = ""
					this.city_id = res.city_id
					this.city_name = ""
					this.area_id = res.area_id
					this.area_name = ""

					await this.getProvinceList() //获取省列表
					await this.getCityList() //获取省列表
					await this.getAreaList() //获取省列表

					const province_active = this.province_list.filter((e) => e.value == this.province_id)
					if (province_active.length) this.province_name = province_active[0]['label']
					const city_active = this.city_list.filter((e) => e.value == this.city_id)
					if (city_active.length) this.city_name = city_active[0]['label']
					const area_active = this.area_list.filter((e) => e.value == this.area_id)
					if (area_active.length) this.area_name = area_active[0]['label']


				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			onSaveAddress() {
				if (!this.name) return this.fail("请输入姓名")
				if (!this.mobile) return this.fail("请输入手机号")
				if (!this.province_id) return this.fail("请选择省")
				if (!this.city_id) return this.fail("请选择市")
				if (!this.area_id) return this.fail("请选择县")
				if (!this.address) return this.fail("请输入详细地址")

				const params = {
					id: this.id,
					receiver: this.name,
					mobile: this.mobile,
					address: this.address,
					area_id: this.area_id,
				}
				this.api.post("/api/address/addedit", { params: params }).then(res => {
					this.$refs.iToast.show("保存成功")
					uni.$emit("address-success")
					setTimeout(() => {
						this.goBack()
					}, 1000)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding-bottom: 20rpx;
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx 70rpx;
		margin-top: 10rpx;

		.line {
			display: flex;
			align-items: flex-start;
			margin-top: 26rpx;

			.label {
				line-height: 84rpx;
				font-size: 28rpx;
				color: #333333;
				width: 130rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.line-bg {
					position: relative;
					flex: 1;
					display: flex;
					align-items: center;
					background: #FAFAFA;
					border-radius: 12rpx;
					margin-right: 16rpx;

					.input {
						height: 84rpx;
						padding-left: 26rpx;
						flex: 1;
					}

					uni-picker {
						flex: 1;
					}

					.select-line {
						display: flex;
						align-items: center;

						.select-ioc {
							width: 20rpx;
							height: 20rpx;
							margin-right: 16rpx;
						}
					}

					.textarea {
						padding: 28rpx;
						font-size: 28rpx;
						height: 180rpx;
						width: 100%;
					}
				}

				.line-bg:last-child {
					margin-right: 0;
				}
				.tips{
					font-size: 24rpx;
					margin-top: 10rpx;
					padding-left: 10rpx;
					color: #333;
				}
			}
			.right-row{
				flex-direction: row;
			}
		}

	}

	.btn-view {
		padding: 70rpx 30rpx;
	}
</style>